<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户详情</title>
  <link rel="shortcut icon" href="配置_config.png" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="component/elementUI/index.css">
  <link rel="stylesheet" href="style/wangeditor.css">
  <link rel="stylesheet" href="style/index.css">
  <style>
    .el-avatar{
      height: 100px;
      width: 100px;
      margin: 20px 70px;
    }
    .daohang{
      width: 250px;
      height: 870px;
      background-color: rgb(84, 92, 100);
      float: left;
    } 
    .el-menu-vertical-demo{
      width: 250px;
    }
    .textg{
      display: block;
      text-align: center;
      color: rgb(255, 240, 240);
    
      font-weight:800;
      margin-bottom: 40px;
    }
    .you{
      margin-left: 280px;
      background-color: rgb(228, 228, 228);
      height: 870px;
    }
    .ka{
      margin: 0px 50px 5px 50px;
    }
    .el-tabs__nav-wrap{
      background-color: rgb(255, 255, 255);
    }
    .el-tabs__item{
      font-size: 18px;
 
    }
    .el-tabs__nav-scroll{
      margin: 10px 30px;
    }
    .xinzeng{
      margin-left: 30px;
      margin-right: 30px;
      float: left;
    }

    .fenye{
      position: relative;
      top: 38%;
      height: 4%;
      margin-top: 10px;
      text-align: center;
    }
    .zhengtou{
      margin-left: 30px;
    }
    .el-pagination{
      height: 0;
    }
  </style>
<body>
  <div id="app">
    
    <div class="daohang">
      <!-- 头像 -->
      <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
      <!-- 文字 -->
      <span class="textg">管理员</span>
      <!-- 导航 -->
    <el-menu
    default-active="4-1"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="1">
      <i class="el-icon-s-home"></i>
      <span slot="title">首页</span>
    </el-menu-item>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-s-data"></i>
        <span>活动管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="2-1">活动用户</el-menu-item>
        <el-menu-item index="2-2">活动数据</el-menu-item>
        <el-menu-item index="2-3">自定义活动</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-menu-item index="3">
      <i class="el-icon-s-shop"></i>
      <span slot="title"><a href="./审核.html">商铺管理</a></span>  
    </el-menu-item>
    <el-submenu index="4">
      <template slot="title">
        <i class="el-icon-s-custom"></i>
        <span>用户管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="4-1">用户详情</el-menu-item>
        <el-menu-item index="4-2"><a href="./用户数据.html">用户数据</a></el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-menu-item index="5">
      <i class="el-icon-view"></i>
      <span slot="title">订单监控</span>
    </el-menu-item>
    <el-menu-item index="6">
      <i class="el-icon-sell"></i>
      <span slot="title">商品管理</span>
    </el-menu-item>
    <el-menu-item index="7">
      <i class="el-icon-coin"></i>
      <span slot="title">对账系统</span>
    </el-menu-item>
    <el-menu-item index="7">
      <i class="el-icon-s-marketing"></i>
      <span slot="title">合作维护</span>
    </el-menu-item>
    </el-menu>
    </div>


    <!-- 未识别 -->
   <div class="you">

    <template class="ka">
      <el-tabs v-model="activeName" @tab-click="toushen1">
        <el-tab-pane label="未识别" name="first">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="用户姓名" class="zhengtou">
                  <el-input v-model="formInline.name" placeholder="用户姓名"></el-input>
                </el-form-item>
                <el-form-item label="区域" class="zhongn">
                  <el-select v-model="formInline.qy" placeholder="区域" class="quy">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                  <el-select v-model="formInline.jd" placeholder="街道" class="quy">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                  <el-select v-model="formInline.jf" placeholder="积分" class="quy">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                
            <el-button type="info">重置</el-button>
            <el-button type="primary">查询</el-button>
          </el-form>


       <div class="biao">
        <template class="biao">
         <!-- 每页显示几条数据  -->
        <el-table
          class="biao" border
          ref="filterTable"
          :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            sortable
            width="180"
            column-key="date"
            :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
            :filter-method="filterHandler">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="100">
          </el-table-column>
          <el-table-column
            prop="pon"
            label="电话"
            width="120">
          </el-table-column>
          <el-table-column
            prop="jf"
            label="积分"
            min-width="50">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            min-width="320"
           :formatter="formatter">
          </el-table-column>
          <el-table-column
            prop="type"
            label="性质"
            width="130">
          </el-table-column>
          <el-table-column
            prop="yqr"
            label="邀请人"
            width="100">
          </el-table-column>
          <el-table-column
            prop="zhuang"
            label="状态"
            width="90"
            :filters="[{ text: '识别成功', value: '识别成功' }, { text: '未识别', value: '未识别' }]"
            :filter-method="filterTag"
            filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.tag === '未识别' ? 'primary' : 'success'"
            disable-transitions>{{scope.row.zhuang}}</el-tag>
       </template>
      </el-table-column>
      <el-table-column
      label="操作"
      width="140">
      <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small" class="shibie">去识别</el-button>
          <el-button type="text" size="small" @click="bianji(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
    </el-table>
    </template>
       </div>
        

        
      </el-tab-pane>
      <el-tab-pane label="识别成功" name="second">
      </el-tab-pane>
    </template>

    <div class="fenye">
      <el-pagination
      style="margin-bottom: 3px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagesize"
      layout="total,sizes,prev,pager,next"
      :total="tableData.length">
      </el-pagination>
    </div>
   </div>


  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script type="text/javascript" src="utils/wangeditor.js"></script>
<script type="text/javascript" src="utils/jquery.min.js"></script>
<script type="text/javascript" src="utils/jquery.cookie.js"></script>
<script type="text/javascript" src="utils/vue.min.js"></script>
<script type="text/javascript" src="utils/vuex.min.js"></script>
<script type="text/javascript" src="component/elementUI/index.js"></script>
<script type="text/javascript" src="component/component.js"></script>
<script type="text/javascript" src="config/config.js"></script>
<script type="text/javascript" src="utils/FileSaver.min.js"></script>
<script type="text/javascript" src="utils/FileSaver.js"></script>
<script type="text/javascript" src="utils/xlsx.full.min.js"></script>
<script type="text/javascript" src="utils/xlsx.core.min.js"></script>
<script type="text/javascript" src="utils/compressor.js"></script>
<script type="text/javascript" src="utils/ID_Validity.js"></script>
<script type="text/javascript" src="utils/utils.js"></script>
<script>

   var a = new Vue({
    el: '#app',
    data() {
      return{ 
        currentPage: 1,
        pagesize:11, // 每页的数据条数
        activeName: 'first',
        size:["large"],
        squareUrl: "头像.jpg",
        formInline: {
          name:'',
          sou:'',
          jf: '',
        },
        tableData: [{
          type: [],
          date: '',
          name: '',
          pon:'',
          jf:'',
          jd:'',
          xx:'',
          seq:'',
          address:'',
          yqr:'',
          yqm:'',
          jy: '',
          zhuang: ''
        }],
      }
    },
    mounted() {   
      this.getList()
  },
    methods: {
      getList(){
        $.ajax({
          headers:{
            'Content-Type':'application/x-www-form-urlencoded',
            Accesstoken:'eyJraWQiOiJteS1rZXktaWQiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxNTA0NjAwNjEyMCIsImF1ZCI6ImFwaS5leGFtcGxlLmNvbSIsImlzcyI6ImF1dGguZXhhbXBsZS5jb20iLCJVc2VySW5mbyI6eyJVc2VyTmFtZSI6IjE1MDQ2MDA2MTIwIn0sImV4cCI6MTczMTM3ODEwMSwiaWF0IjoxNzMxMzc0NTAxLCJqdGkiOiI3ZGQ3YTI1NC1hZjI4LTRjZjUtYmZjNi0wMzdiZGVmZDlmNjQifQ.ZYwrr1ETpJCNTy55VObFrmyzYGmhri95soouGqGmVpweHMHsE2j7buSdCJDP0mxlNnhu4e8Kk0pK8Sa4pHAddT8RVD5PXl2I2gCDyzCcI5hSmxbiuNETTJrXqAtTw4WVCHWW4H3VHHfC1RdH0WRM0dfWalUrZ8qUPDRQcl0BXiiZ0wAQ8BW3LoZlFPddg5ShPOt6BpSBg71oo_pGAMY3QxY6rd5ibh4R347e2cc8xVf2OMAKFVXtjX_yZFKIW8A_MU0InvCJGzXcNT8jUR2xkTAsOIAp-OYO_Tsppn-pKXgFvRTvBQHN-Yx9BH74QqXH6mun3Kdcky0q31Nt3WcV0w',
          },
          url: 'https://service2.ediblefungus.cn/zhaobo/generalBusiness/generalQueryByTableNameWithOriginal',
            type: 'POST',
            data:{       
              RowAmount: 10,            //  传给后台的参数
              Data:'usertable',
              Condition:"zhuang ='未识别'"
          },
          success:(usertable)=>{
            this.tableData = usertable
            console.log(this.tableData);
          },
       })
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val
      },
      // 分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pagesize = val
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      formatter(row, column) {
        return row.address;
      },
      // 表格
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      toushen1(){

      },
      handleClick(row){
        row.zhuang = '识别成功'
        console.log(row,'row');


         // 查到修改数据
         $.ajax({
          headers:{
            'Content-Type':'application/x-www-form-urlencoded',
            Accesstoken:'eyJraWQiOiJteS1rZXktaWQiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxNTA0NjAwNjEyMCIsImF1ZCI6ImFwaS5leGFtcGxlLmNvbSIsImlzcyI6ImF1dGguZXhhbXBsZS5jb20iLCJVc2VySW5mbyI6eyJVc2VyTmFtZSI6IjE1MDQ2MDA2MTIwIn0sImV4cCI6MTczMTczMzY1NiwiaWF0IjoxNzMxNzMwMDU2LCJqdGkiOiI4YjUzMjhjOC0wYzhmLTQzZTktOTY2MC02MGJmYTQzMmZmNjYifQ.jfQrRyqNzFWvhLKTuKV-v-8Q5PkQBmrWuFWS3SYDcNLTILE78Gmuxty9KNHjc7wq2gJCRRGHofwyNtlwVShOgp-bPULw9NcCZXq3MHhMqUnXeB98S1m1HO3A7b3NJ987XtQE7ZK672mNsfY6p6YdMeZQYLq7rDAdR6hMFmFbiOjRcCAYuFzgjeSJ8YU6aeBl73oE6DxlbdW3UifbqMcI1uYQK_npgW5Lir5-byoJXR_jCXvK_6f9zL8DulJapSx0jDiKJlge1CYHZQTQ_LR1yShUOdCwD_MFjx2EiN0rE6N2CMcK_vwBx-yNUwypRGkSiEl3XLxTB9yAWgwKaZ2A1Q',
          },
          url: 'https://service2.ediblefungus.cn/zhaobo/generalBusiness/generalQueryByTableNameWithOriginal',
            type: 'POST',
            data:{       
              RowAmount: 10,            //  传给后台的参数
              Data:'usertable',
              Condition:"id='"+row.id+"'"
          },
          success:(row)=>{
            console.log(row[0].zhuang);
            row[0].zhuang = '识别成功'
            console.log(row[0].zhuang);
            console.log(row,'rowqqq');
            
              // 修改提交
              $.ajax({
                    headers:{                 // 请求头，ajax封装默认请求头一般可以不写
                      AccessToken:'eyJraWQiOiJteS1rZXktaWQiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxNTA0NjAwNjEyMCIsImF1ZCI6ImFwaS5leGFtcGxlLmNvbSIsImlzcyI6ImF1dGguZXhhbXBsZS5jb20iLCJVc2VySW5mbyI6eyJVc2VyTmFtZSI6IjE1MDQ2MDA2MTIwIn0sImV4cCI6MTczMTczMzY1NiwiaWF0IjoxNzMxNzMwMDU2LCJqdGkiOiI4YjUzMjhjOC0wYzhmLTQzZTktOTY2MC02MGJmYTQzMmZmNjYifQ.jfQrRyqNzFWvhLKTuKV-v-8Q5PkQBmrWuFWS3SYDcNLTILE78Gmuxty9KNHjc7wq2gJCRRGHofwyNtlwVShOgp-bPULw9NcCZXq3MHhMqUnXeB98S1m1HO3A7b3NJ987XtQE7ZK672mNsfY6p6YdMeZQYLq7rDAdR6hMFmFbiOjRcCAYuFzgjeSJ8YU6aeBl73oE6DxlbdW3UifbqMcI1uYQK_npgW5Lir5-byoJXR_jCXvK_6f9zL8DulJapSx0jDiKJlge1CYHZQTQ_LR1yShUOdCwD_MFjx2EiN0rE6N2CMcK_vwBx-yNUwypRGkSiEl3XLxTB9yAWgwKaZ2A1Q',
                      'Content-Type':'application/x-www-form-urlencoded',
                    },
                    url: 'https://service2.ediblefungus.cn/zhaobo/generalBusiness/generalSave',
                    type: 'POST',
                    data:{                   //  传给后台的参数
                      Data:JSON.stringify({"Modify":{"usertable":row}}) ,
                    },
                    success:(row)=>{
                      console.log(row);
                      
                      if (row.Status =='success') {
                        this.getList();//
                      }
                    },
                })
          },
        })
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
  },

})
      
    

</script>
</html>